<script lang="ts" setup>
import { ref,type Ref ,onMounted} from 'vue';
import { getCartFn} from '@/api/cart';
import { useRouter, useRoute } from 'vue-router';

    const cartList:Ref<Array<any>> = ref([])
    const route = useRoute()
    const shopNm = ref('')
    const total:Ref<number> = ref(0)
    const show = ref(false)




    onMounted(() => {
      console.log(route.query.id);
        
 //获取购物车数量 当前店铺的
  getCartFn().then(res => {
    console.log(res);
    cartList.value = res.filter(item => item.id == route.query.id)
    shopNm.value = cartList.value[0].shopname  //必须在上面定义好  否则下面直接这样写报错
     let num = 0;
    cartList.value.forEach(item => {
      num += item.price * item.num;
    })
    total.value = num.toFixed(2); 
 }).catch(error => {
    console.error('获取商品信息失败:', error);
    cartList.value = []; // 或者根据需求做其他处理
  
})
 })
</script>

<template>
    <div class="box">
        <header>
            <van-icon @click="$router.back()" name="arrow-left" />
            <h3>订单详情</h3>
        </header>

        <div class="orderPay">
            <p style="font-size: 16px;">订单待付款 ></p>
               <p>
                <span style="color: #f66;">4分钟</span><span>后自动取消</span>
               </p>
           <p class="payBtn"><van-button color="orange" round plain>取消订单</van-button>
            <van-button @click="show = true" round color="linear-gradient(to right, #ff6034, #ee0a24)">去付款</van-button></p> 
        </div>

<section>
<!-- <h2>{{ cartList[0].shopname }}</h2>  这里这样写报错-->
<h2>{{ shopNm }}广场2店 ></h2>

        <van-card v-for="item in cartList"
  :num="item.num"
  :price="item.price"
  :desc="item.proname"
  :title="item.proname"
  :thumb="item.img"
/>
<span>共{{ cartList.length }}件</span>
</section>

<p class="totalList"><span>商品总价:</span><span><b>￥{{ total }}</b></span></p>


<!--弹出框
 <van-dialog v-model:show="show" title="支付" show-cancel-button>
  <img src="https://fastly.jsdelivr.net/npm/@vant/assets/apple-3.jpeg" />
</van-dialog> -->

<!-- 图标位置     弹出层-->
<van-popup
  v-model:show="show"
  closeable
  close-icon-position="top-left"
  position="bottom"
  :style="{ height: '30%',borderRadius: '10px' }"
>
<header>请在 <span :style="{color: '#f66',fontSize:'16px'}">30分钟</span>内完成支付</header>

<van-button class="payBtncl" round color="linear-gradient(to right, #ff6034, #ee0a24)">继续结算￥{{ total }} </van-button>
</van-popup>

    </div>
</template>

<style lang="scss" scoped>
.box{
    height: 100%;
    background-color: #f7f7f7;
}


header {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    height: 60px;

    .van-icon{
        position: absolute;
        left:10px;
        font-size: 18px;
    }

    .van-button{
       margin-right: 10px;
    }
}

.orderPay{
    background-color: white;
    height: 150px;
    width: 94%;
    margin: 0 auto;
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: center;
     box-sizing: border-box;
    padding: 20px 0;
    border-radius: 10px;
}

.payBtn{
    width: 50%;
    display: flex;
    justify-content: space-between;
}

section{
    width: 90%;
    background-color: white;
    padding: 10px;
    margin: 5px auto;
    border-radius: 10px;
}

.van-card{
    background-color: white;
}

span{
    font-size: 14px;
}

.totalList{
    height: 300px;
    width: 90%;
    margin: 5px auto;
    border-radius: 10px;
    display: flex;
    justify-content: space-between;
    background-color: white;
    padding: 10px;
}
.payBtncl{
    width: 80%;
    margin-left: 30px;
    margin-top: 30px;
}

</style>